<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>الرئيسيه</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
        <link href="css/chosen.css" rel="stylesheet">
        <link rel="shortcut icon" href="img/favicon.ico">
        <style>
            td, th {
                text-align: center !important;
            }
            .clear {
                padding-top: 10px;
            }
        </style>
        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/chosen.jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $('.chosen').chosen();
                $('.icon-remove, .remove').click(function(e){
                    //ask the use for the confirm
                    var response = confirm('Are you sure?');
                    //check if the user confirmed
                    if(response){
                        //check if this is the image or the link
                        if($(this).hasClass('remove')){
                            //remove the table row
                            $(this).parent().parent().remove();
                        } else {
                            //remove the table row
                            $(this).parent().parent().parent().remove();
                        }
                    }
                    e.preventDefault();
                });
            });
        </script>
    </head>
    <body>
        <div class="container" style="direction: rtl;">
            <!-- start of the navigation bar -->
            <div class="navbar">
                <div class="navbar-inner">
                    <div class="container">
                        <ul class="nav pull-right">
                            <li class="divider-vertical"></li>
                            <li><a href="#">المخازن</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="#">المنتجات</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="supplier.html">الموردين</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="customer.html">العملاء</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="index1.html">الفواتير الوارده</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="index.html">الفواتير</a></li>
                            
                        </ul>
                    </div>
                </div>
            </div>
            <!-- end of the navigation bar -->

            <!-- start of the photos bar -->
            <ul class="thumbnails">
                <li class="span3">
                    <a href="#" class="thumbnail">
                        <img src="http://placehold.it/260x180" width="60" height="80" alt="لحوم" title="لحوم">
                    </a>
                </li>
                <li class="span3">
                    <a href="#" class="thumbnail">
                        <img src="http://placehold.it/260x180" width="60" height="80" alt="لحوم" title="لحوم">
                    </a>
                </li>
                <li class="span3">
                    <a href="#" class="thumbnail">
                        <img src="http://placehold.it/260x180" width="60" height="80" alt="لحوم" title="لحوم">
                    </a>
                </li>
                <li class="span3">
                    <a href="#" class="thumbnail">
                        <img src="http://placehold.it/260x180" width="60" height="80" alt="لحوم" title="لحوم">
                    </a>
                </li>
            </ul>
            <!-- end of the photos bar -->

            <!-- start of the form notifications -->
            <div class="alert alert-error">
                <button class="close" data-dismiss="alert">×</button>
                <strong>خطأ!</strong> يجب أدخال سعر الوحده.
            </div>
            <div class="alert">
                <button class="close" data-dismiss="alert">×</button>
                <strong>تحذير!</strong> يجب أدخال سعر الوحده.
            </div>
            <div class="alert alert-success">
                <button class="close" data-dismiss="alert">×</button>
                تم بنجاح
            </div>
            <!-- end of the form notifications -->

            <!-- start of the add form -->
            <div class="form-inline">
                <label style="padding-right: 200px; padding-left: 10px;" for="select01">المنتج</label>
                <select id="select01">
                    <option>المنتج</option>
                    <option>المنتج</option>
                    <option>المنتج</option>
                    <option>المنتج</option>
                    <option>المنتج</option>
                </select>
                <label style="padding: 10px;" for="select02">المصنع</label>
                <select id="select02">
                    <option>المصنع</option>
                    <option>المصنع</option>
                    <option>المصنع</option>
                    <option>المصنع</option>
                    <option>المصنع</option>
                </select>
                <label style="padding: 10px;" for="select03">البلد</label>
                <select id="select03">
                    <option>البلد</option>
                    <option>البلد</option>
                    <option>البلد</option>
                    <option>البلد</option>
                    <option>البلد</option>
                </select>
                <div class="clear"></div>
                <label style="padding-right: 100px; padding-left: 10px;" for="input01">الكميه</label>
                <input id="input01" type="number" required="required"><span class="label label-info" style="margin-right: 10px;">كجم</span>
                <label style="padding: 10px;" for="input02">العدد</label>
                <input id="input02" type="number" required="required">
                <label style="padding: 10px;" for="input03">سعر الوحده</label>
                <input id="input03" type="number" required="required">
                <label style="padding: 10px;">الإجمالى</label>
                <span class="label label-info">200</span>
                <div class="clear"></div>
                <button style="margin-right: 560px;" class="btn btn-primary" type="button">اضف</button>
            </div>
            <!-- end of the add form -->

            <div class="clear"></div>

            <!-- start of the search form -->
            <div class="form-inline well">
                <label style="padding-left: 10px;" for="input04">رقم الفاتوره</label>
                <input id="input04" type="number" required="required" value="1" disabled="disabled">
                <label style="padding-right: 200px; padding-left: 32px;" for="input04">التاريخ</label>
                <input id="input05" type="text" required="required" value="4/7/2012" disabled="disabled">
                <div class="clear"></div>
                <label style="padding-left: 15px;" for="input06">اسم العميل</label>
                <select id="input06" class="chosen">
                    <option>اسم العميل</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>33</option>
                </select>
                <label style="padding-right: 200px; padding-left: 15px;" for="input07">كود العميل</label>
                <select id="input07" class="chosen">
                    <option>كود العميل</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>33</option>
                </select>
                <div class="clear"></div>
                <label style="padding-right: 200px; padding-left: 32px;" for="input08">رصيد العميل</label>
                <input id="input08" type="number" required="required" value="10" disabled="disabled">
            </div>
            <!-- end of the search form -->

            <!-- start of the table -->
            <table class="table table-condensed table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>المنتج</th>
                        <th>المصنع</th>
                        <th>البلد</th>
                        <th>الكميه</th>
                        <th>سعر الوحده</th>
                        <th>الأجمالى</th>
                        <th>تعديلات</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>
                            <select disabled="disabled">
                                <option>المنتج</option>
                                <option>المنتج</option>
                                <option>المنتج</option>
                                <option>المنتج</option>
                                <option>المنتج</option>
                            </select>
                        </td>
                        <td>
                            <select disabled="disabled">
                                <option>المصنع</option>
                                <option>المصنع</option>
                                <option>المصنع</option>
                                <option>المصنع</option>
                                <option>المصنع</option>
                            </select>
                        </td>
                        <td>
                            <select disabled="disabled">
                                <option>البلد</option>
                                <option>البلد</option>
                                <option>البلد</option>
                                <option>البلد</option>
                                <option>البلد</option>
                            </select>
                        </td>
                        <td><input type="number" value="100" disabled="disabled" style="width: 50px;"></td>
                        <td><input type="number" value="100" disabled="disabled" style="width: 50px;"></td>
                        <td><input type="number" value="100" disabled="disabled" style="width: 50px;"></td>
                        <td><a href="#" title="حذف" class="remove"><i class="icon-remove"></i> حذف</a> <a href="#" title="تعديل"><i class="icon-edit"></i> تعديل</a></td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>
                            <select disabled="disabled">
                                <option>المنتج</option>
                                <option>المنتج</option>
                                <option>المنتج</option>
                                <option>المنتج</option>
                                <option>المنتج</option>
                            </select>
                        </td>
                        <td>
                            <select disabled="disabled">
                                <option>المصنع</option>
                                <option>المصنع</option>
                                <option>المصنع</option>
                                <option>المصنع</option>
                                <option>المصنع</option>
                            </select>
                        </td>
                        <td>
                            <select disabled="disabled">
                                <option>البلد</option>
                                <option>البلد</option>
                                <option>البلد</option>
                                <option>البلد</option>
                                <option>البلد</option>
                            </select>
                        </td>
                        <td><input type="number" value="100" disabled="disabled" style="width: 50px;"></td>
                        <td><input type="number" value="100" disabled="disabled" style="width: 50px;"></td>
                        <td><input type="number" value="100" disabled="disabled" style="width: 50px;"></td>
                        <td><a href="#" title="حذف" class="remove"><i class="icon-remove"></i> حذف</a> <a href="#" title="تعديل"><i class="icon-edit"></i> تعديل</a></td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>
                            <select disabled="disabled">
                                <option>المنتج</option>
                                <option>المنتج</option>
                                <option>المنتج</option>
                                <option>المنتج</option>
                                <option>المنتج</option>
                            </select>
                        </td>
                        <td>
                            <select disabled="disabled">
                                <option>المصنع</option>
                                <option>المصنع</option>
                                <option>المصنع</option>
                                <option>المصنع</option>
                                <option>المصنع</option>
                            </select>
                        </td>
                        <td>
                            <select disabled="disabled">
                                <option>البلد</option>
                                <option>البلد</option>
                                <option>البلد</option>
                                <option>البلد</option>
                                <option>البلد</option>
                            </select>
                        </td>
                        <td><input type="number" value="100" disabled="disabled" style="width: 50px;"></td>
                        <td><input type="number" value="100" disabled="disabled" style="width: 50px;"></td>
                        <td><input type="number" value="100" disabled="disabled" style="width: 50px;"></td>
                        <td><a href="#" title="حذف" class="remove"><i class="icon-remove"></i> حذف</a> <a href="#" title="تعديل"><i class="icon-edit"></i> تعديل</a></td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>
                            <select disabled="disabled">
                                <option>المنتج</option>
                                <option>المنتج</option>
                                <option>المنتج</option>
                                <option>المنتج</option>
                                <option>المنتج</option>
                            </select>
                        </td>
                        <td>
                            <select disabled="disabled">
                                <option>المصنع</option>
                                <option>المصنع</option>
                                <option>المصنع</option>
                                <option>المصنع</option>
                                <option>المصنع</option>
                            </select>
                        </td>
                        <td>
                            <select disabled="disabled">
                                <option>البلد</option>
                                <option>البلد</option>
                                <option>البلد</option>
                                <option>البلد</option>
                                <option>البلد</option>
                            </select>
                        </td>
                        <td><input type="number" value="100" disabled="disabled" style="width: 50px;"></td>
                        <td><input type="number" value="100" disabled="disabled" style="width: 50px;"></td>
                        <td><input type="number" value="100" disabled="disabled" style="width: 50px;"></td>
                        <td><a href="#" title="حذف" class="remove"><i class="icon-remove"></i> حذف</a> <a href="#" title="تعديل"><i class="icon-edit"></i> تعديل</a></td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>
                            <select disabled="disabled">
                                <option>المنتج</option>
                                <option>المنتج</option>
                                <option>المنتج</option>
                                <option>المنتج</option>
                                <option>المنتج</option>
                            </select>
                        </td>
                        <td>
                            <select disabled="disabled">
                                <option>المصنع</option>
                                <option>المصنع</option>
                                <option>المصنع</option>
                                <option>المصنع</option>
                                <option>المصنع</option>
                            </select>
                        </td>
                        <td>
                            <select disabled="disabled">
                                <option>البلد</option>
                                <option>البلد</option>
                                <option>البلد</option>
                                <option>البلد</option>
                                <option>البلد</option>
                            </select>
                        </td>
                        <td><input type="number" value="100" disabled="disabled" style="width: 50px;"></td>
                        <td><input type="number" value="100" disabled="disabled" style="width: 50px;"></td>
                        <td><input type="number" value="100" disabled="disabled" style="width: 50px;"></td>
                        <td><a href="#" title="حذف" class="remove"><i class="icon-remove"></i> حذف</a> <a href="#" title="تعديل"><i class="icon-edit"></i> تعديل</a></td>
                    </tr>
                </tbody>
            </table>
            <!-- end of the table -->

            <div class="form-inline">
                <label style="padding-left: 10px;" for="input13">الإجمالى</label>
                <input id="input13" type="number" required="required" value="10" disabled="disabled">
                <label style="padding-left: 10px; padding-right: 10px;" for="input14">المدفوع</label>
                <input id="input14" type="number" required="required" value="10" disabled="disabled">
                <label style="padding-left: 10px; padding-right: 10px;" for="input15">الباقى</label>
                <input id="input15" type="number" required="required" value="10" disabled="disabled">
                <label style="padding-left: 10px; padding-right: 10px;" for="input16">الرصيد بعد العمليه</label>
                <input id="input16" type="number" required="required" value="10" disabled="disabled">
                <div class="clear"></div>
                <button style="margin-right: 500px;" class="btn btn-primary" type="button">حفظ</button>
                <button style="margin-right: 70px;" class="btn btn-primary" type="button">إلغاء</button>
            </div>
        </div>
        <!-- end of the container -->

        <!-- extra padding to the end of the page -->
        <div class="clear"></div>
    </body>
</html>